<template>
      
  <div class="family-school-index">
    <el-card>
      <el-row :gutter="38">
        <el-col :span="6">
          <!-- <el-card shadow="always" body-style="padding:10px;"> -->
          <el-card shadow="always">
            <div class="card_radiu">
              <div class="card_top card_top1">
                <span class="icon123 el-icon-price-tag"></span>
                <span class="top_title">家访记录</span>
              </div>
              <div class="card_bottom card_bottom1">
                <div class="bottom_div">
                  <span class="bottom_div_item">
                    {{ homevisiting.one.value }}
                    <span class="bottom_div_item_tab">{{
                      homevisiting.one.label
                    }}</span>
                  </span>
                  <span class="bottom_div_item">
                    {{ homevisiting.two.value }}
                    <span class="bottom_div_item_tab">
                      {{ homevisiting.two.label }}</span
                    >
                  </span>
                </div>
                <div class="bottom_div">
                  <span class="bottom_div_item">
                    {{ homevisiting.three.value }}
                    <span class="bottom_div_item_tab">
                      {{ homevisiting.three.label }}</span
                    >
                  </span>
                  <span class="bottom_div_item">
                    {{ homevisiting.four.value }}
                    <span class="bottom_div_item_tab">
                      {{ homevisiting.four.label }}</span
                    >
                  </span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="always">
            <div class="card_radiu">
              <div class="card_top card_top2">
                <span class="icon123 el-icon-timer"></span>
                <span class="top_title">每日安排</span>
              </div>
              <div class="card_bottom card_bottom2">
                <div class="bottom_div">
                  <span class="bottom_div_item">
                    {{ dayarrange.one.value }}
                    <span class="bottom_div_item_tab">
                      {{ dayarrange.one.label }}</span
                    >
                  </span>
                  <span class="bottom_div_item">
                    {{ dayarrange.two.value }}
                    <span class="bottom_div_item_tab">
                      {{ dayarrange.two.label }}</span
                    >
                  </span>
                </div>
                <div class="bottom_div">
                  <span class="bottom_div_item">
                    {{ dayarrange.three.value }}
                    <span class="bottom_div_item_tab">
                      {{ dayarrange.three.label }}</span
                    >
                  </span>
                  <span class="bottom_div_item">
                    {{ dayarrange.four.value }}
                    <span class="bottom_div_item_tab">
                      {{ dayarrange.four.label }}</span
                    >
                  </span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="always">
            <div class="card_radiu">
              <div class="card_top card_bottom3">
                <span class="icon123 el-icon-date"></span>
                <span class="top_title">课程安排</span>
              </div>
              <div class="card_bottom card_bottom3">
                <div class="bottom_div">
                  <span class="bottom_div_item">
                    {{ coursearrange.one.value }}
                    <span class="bottom_div_item_tab">
                      {{ coursearrange.one.label }}</span
                    >
                  </span>
                  <span class="bottom_div_item">
                    {{ coursearrange.two.value }}
                    <span class="bottom_div_item_tab">
                      {{ coursearrange.two.label }}</span
                    >
                  </span>
                </div>
                <div class="bottom_div">
                  <span class="bottom_div_item">
                    {{ coursearrange.three.value }}
                    <span class="bottom_div_item_tab">
                      {{ coursearrange.three.label }}</span
                    >
                  </span>
                  <span class="bottom_div_item">
                    {{ coursearrange.four.value }}
                    <span class="bottom_div_item_tab">
                      {{ coursearrange.four.label }}</span
                    >
                  </span>
                </div>
              </div>
            </div></el-card
          >
        </el-col>
        <el-col :span="6">
          <el-card shadow="always">
            <div class="card_radiu">
              <div class="card_top card_top4">
                <span class="icon123 el-icon-crop"></span>
                <span class="top_title">日谈心管理</span>
              </div>
              <div class="card_bottom card_bottom4">
                <div class="bottom_div">
                  <span class="bottom_div_item">
                    {{ sensitiveword.one.value }}
                    <span class="bottom_div_item_tab">
                      {{ sensitiveword.one.label }}</span
                    >
                  </span>
                  <span class="bottom_div_item">
                    {{ sensitiveword.two.value }}
                    <span class="bottom_div_item_tab">
                      {{ sensitiveword.two.label }}</span
                    >
                  </span>
                </div>
                <div class="bottom_div">
                  <span class="bottom_div_item">
                    {{ sensitiveword.three.value }}
                    <span class="bottom_div_item_tab">
                      {{ sensitiveword.three.label }}</span
                    >
                  </span>
                  <span class="bottom_div_item">
                    {{ sensitiveword.four.value }}
                    <span class="bottom_div_item_tab">
                      {{ sensitiveword.four.label }}</span
                    >
                  </span>
                </div>
              </div>
            </div></el-card
          >
        </el-col>
      </el-row>

      <el-card style="margin-top: 40px; font-size: 25px; position: relative">
        <span style="border-left: 10px solid blue; padding-left: 15px"
          >学情数据</span
        >
        <span class="edittime">数据更改日期:</span>
        <span class="edittime">2022-01-05</span>
        <span class="gengduo">更多></span>
      </el-card>
         <el-card style="margin-top: 40px">
        <el-select v-model="cls_value" placeholder="请选择">
          <el-option
            v-for="item in clsoptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <!-- <span>{{cls_value}}</span> -->
        <div id="myChart" ref="myChart"></div>
      </el-card>
    </el-card>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  props: {},
  data() {
    return {
      homevisiting: {
        one: { value: 4538, label: "历史记录" },
        two: { value: 153, label: "登陆人数" },
        three: { value: 155, label: "模板统计" },
        four: { value: 564, label: "留言模块" },
      },
      dayarrange: {
        one: { value: 4, label: "活动直播" },
        two: { value: 516, label: "学情分析" },
        three: { value: 35, label: "利好传递" },
        four: { value: 15, label: "校级公告" },
      },
      coursearrange: {
        one: { value: 24, label: "学院风采" },
        two: { value: 35, label: "名师风采" },
        three: { value: 18, label: "班级管理" },
        four: { value: 35, label: "心里教育" },
      },
      sensitiveword: {
        one: { value: 159, label: "关键词管理" },
        two: { value: 51, label: "敏感词分析" },
        three: { value: 80, label: "日谈心完成率" },
        four: { value: 1654, label: "父母沟通" },
      },
      clsoptions: [
        {
          value: "1",
          label: "人工-专高2105A",
        },
        {
          value: "2",
          label: "高职-语文2102A",
        },
      ],
      cls_value: "",
      data1: [180, 200, 300, 140],
      data2: [120, 200, 240, 260],
    };
  },
  computed: {},
  created() {},
  mounted() {
    // 调用绘制图表的方法
    this.draw();
  },
  watch: {
    cls_value: function (val) {
      if (val == 1) {
        this.data1 = [100, 100, 300, 150];
        this.data2 = [120, 220, 340, 160];

        this.draw();
      } else if (val == 2) {
        this.data1 = [180, 200, 300, 140];
        this.data2 = [120, 200, 240, 260];

        this.draw();
      }
    },
  },
  methods: {
    draw() {
      // 实例化echarts对象
      let myChart = echarts.init(this.$refs.myChart);

      // 绘制条形图
      myChart.setOption({
        title: {
          top: 5,
          left: "center",
        },
        legend: {
          data: ["今天", "昨天"],
          top: 30,
        },
        // X轴
        xAxis: {
          data: ["出勤情况", "学习成绩", "行为规范", "作业情况"],
        },
        // Y轴
        yAxis: {},
        // 数据
        series: [
          {
            name: "今天",
            type: "line",
            data: this.data2,
          },
          {
            name: "昨天",
            type: "line",
            data: this.data1,
          },
        ],
      });
    },
  },
  components: {},
};
</script>

<style scoped lang="scss">
#myChart {
  width: 95%;
  height: 300px;
  margin: 20px auto;
  border: 1px solid #ccc;
}
.card_radiu {
  width: 100%;
  height: 230px;
  border-radius: 15px;
}
.card_top {
  height: 80px;
  font-size: 20px;
  border-bottom: 3px solid white;
  border-radius: 15px;
}
.card_bottom {
  font-size: 18px;
  height: 150px;
  color: white;
  border-radius: 15px;
}
.card_top1 {
  background: #9966ff;
}
// FF9999
.card_bottom1 {
  background: #9966ff;
}
.card_top2 {
  background: #9966cc;
}
// FF9999
.card_bottom2 {
  background: #9966cc;
}
.card_top3 {
  background: #cc6699;
}
// FF9999
.card_bottom3 {
  background: #cc6699;
}
.card_top4 {
  background: #ff9999;
}
// FF9999
.card_bottom4 {
  background: #ff9999;
}
.icon123 {
  display: inline-block;
  height: 100%;
  width: 80px;
  text-align: center;
  font-size: 40px;
  line-height: 80px;
  color: white;
}
.top_title {
  display: inline-block;
  height: 100%;
  color: white;
  position: relative;
  left: 10px;
  bottom: 8px;
}
.bottom_div {
  display: flex;
  height: 75px;
  line-height: 75px;
}
.bottom_div_item {
  flex: 1;
  padding-left: 15px;
}
.bottom_div_item_tab {
  display: inline-block;
  margin-left: 20px;
}
.gengduo {
  position: absolute;
  right: 40px;
}
.edittime {
  color: #ccc;
  margin-left: 20px;
}
</style>
